<template>
    <view class="container">
        <view class="logo">
            <image src="/static/logo.png"></image>
        </view>
        <view class="form">
            <view class="input-group">
                <text class="label">账号</text>
                <input v-model="username" placeholder="请输入账号"></input>
            </view>
            <view class="input-group">
                <text class="label">密码</text>
                <input v-model="password" type="password" placeholder="请输入密码"></input>
            </view>
            <view class="input-group">
                <text class="label">确认密码</text>
                <input v-model="confirmPassword" type="password" placeholder="请再次输入密码"></input>
            </view>
            <view class="input-group">
                <text class="label">手机号</text>
                <input v-model="phone" placeholder="请输入手机号"></input>
            </view>
            <view class="input-group code-group">
                <text class="label">验证码</text>
                <input v-model="code" placeholder="请输入验证码"></input>
                <button class="get-code" @click="getCode">{{codeText}}</button>
            </view>
            <button class="register-btn" @click="register">注册</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            confirmPassword: '',
            phone: '',
            code: '',
            codeText: '获取验证码',
            codeTimer: null,
            countdown: 60
        }
    },
    onUnload() {
        // 页面卸载时清除定时器
        if (this.codeTimer) {
            clearInterval(this.codeTimer)
            this.codeTimer = null
        }
    },
    methods: {
        getCode() {
            if (this.codeTimer) return
            
            if (!this.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
                return
            }
            
            // 简单手机号格式验证
            const phoneReg = /^1[3-9]\d{9}$/
            if (!phoneReg.test(this.phone)) {
                uni.showToast({
                    title: '手机号格式不正确',
                    icon: 'none'
                })
                return
            }
            
            // 开始倒计时
            this.codeText = `${this.countdown}s后重新获取`
            this.codeTimer = setInterval(() => {
                this.countdown--
                this.codeText = `${this.countdown}s后重新获取`
                
                if (this.countdown <= 0) {
                    clearInterval(this.codeTimer)
                    this.codeTimer = null
                    this.codeText = '获取验证码'
                    this.countdown = 60
                }
            }, 1000)
            
            // 模拟发送验证码
            uni.showToast({
                title: '验证码已发送',
                icon: 'none'
            })
        },
        register() {
            if (!this.username || !this.password || !this.confirmPassword || !this.phone || !this.code) {
                uni.showToast({
                    title: '请填写完整信息',
                    icon: 'none'
                })
                return
            }
            
            if (this.password !== this.confirmPassword) {
                uni.showToast({
                    title: '两次输入的密码不一致',
                    icon: 'none'
                })
                return
            }
            
            uni.showLoading({
                title: '注册中...'
            })
            
            // 模拟注册请求
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '注册成功',
                    icon: 'success'
                })
                uni.navigateBack()
            }, 1000)
        }
    }
}
</script>

<style>
.container {
    padding: 40rpx;
}
.logo {
    text-align: center;
    margin: 60rpx 0;
}
.logo image {
    width: 200rpx;
    height: 200rpx;
}
.form {
    padding: 0 20rpx;
}
.input-group {
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    padding-bottom: 15rpx;
}
.code-group {
    position: relative;
}
.label {
    width: 120rpx;
    font-size: 28rpx;
}
input {
    flex: 1;
    font-size: 28rpx;
}
.get-code {
    position: absolute;
    right: 0;
    color: #007AFF;
    font-size: 26rpx;
}
.register-btn {
    background-color: #007AFF;
    color: white;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    margin-top: 60rpx;
    font-size: 32rpx;
}
</style>    